<template>
  <div>
    <div class="operate_container" style="box-shadow: none;padding-top: 0 0 20px;">
      <div class="operate_item">
        <div class="operate_left">实例id：</div>
        <div class="operate_right">
          <el-input v-model.trim="searchData.instanceId" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="operate_item">
        <div class="operate_left">申请人：</div>
        <div class="operate_right">
          <el-input
            v-model.trim="searchData.searchName"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="operate_item">
        <div class="operate_left">表单查询：</div>
        <div class="operate_right">
          <el-input
            v-model.trim="searchData.tableName"
            placeholder="请输入表名称/表描述"
          ></el-input>
        </div>
      </div>
      <div class="operate_item">
        <el-button type="primary" @click="searchFunc">搜 索</el-button>
        <el-button @click="resetFunc">重 置</el-button>
      </div>
    </div>
    <div>
      <c-table
        :thead-data="theadData"
        :table-data="tableData"
        :has-check="false"
        border
      >
        <template v-slot:ope="{ scope }">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            round-->
<!--            @click="seeItemFunc(scope.row)"-->
<!--          >查看</el-button>-->
        </template>
      </c-table>
    </div>
    <div class="page_box">
      <el-pagination
        v-show="totalSize"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 查看实例操作历史 -->
<!--    <el-dialog-->
<!--      title="查看"-->
<!--      width="600px"-->
<!--      :visible.sync="dialogVisible"-->
<!--    >-->
<!--      <operate-history-->
<!--        :instance-id="seeInstanceId"-->
<!--        :dialog.sync="dialogVisible"-->
<!--      />-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import { selectInstanceList } from "@/api/lcgl.js";
import Table from "@/components/table/table.vue";
// import OperateHistroy from "./operate-history.vue";
export default {
  components: {
    "c-table": Table,
    // "operate-history": OperateHistroy
  },
  props: {
    activitiKey: {
      type: String,
      default: ""
    },
    isFinish: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      oldSearchData: {},
      initSearchData: {},
      searchData: {
        instanceId: "",
        searchName: "",
        tableName: ""
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      theadData: [
        { name: "序号", code: "index", width: 60 },
        { name: "实例id", code: "instanceId" },
        // { name: "实例名称", code: "modelName" },
        { name: "表描述", code: "tableTxt" },
        { name: "表名", code: "tableName" },
        // { name: "headId", code: "headId" },
        { name: "申请人", code: "userName" },
        { name: "申请时间", code: "createTime", width: 170 },
        { name: "当前环节", code: "taskName" },
        { name: "当前环节处理人", code: "taskAssignee" },
        { name: "操作", code: "a", slotName: "ope", width: 80 }
      ],
      // 查看的弹出层
      dialogVisible: false,
      // 查看的实例id
      seeInstanceId: null
    };
  },
  computed: {
    propData() {
      return {
        isFinish: this.isFinish,
        key: this.activitiKey
      };
    }
  },
  watch: {
    propData(newVal, oldVal) {
      if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
        return;
      }
      this.resetFunc();
    }
  },
  created() {
    this.oldSearchData = {
      ...this.searchData
    };
    this.initSearchData = {
      ...this.searchData
    };
  },
  mounted() {
    this.selectInstanceList();
  },
  methods: {
    /**
     * @name seeItemFunc
     * @description 查看单独的流程实例
     * @param {}
     * @author cjs
     * @date 2021-04-30 10:51:15
     */
    async seeItemFunc(param) {
      const { instanceId } = param;
      this.seeInstanceId = instanceId;
      this.dialogVisible = true;
    },
    /**
     * @name selectInstanceList
     * @description 获取流程实例列表
     * @param {}
     * @author cjs
     * @date 2021-04-30 09:19:30
     */
    async selectInstanceList() {
      const { isFinish, activitiKey: key, currentPage, pageSize } = this;
      const res = await selectInstanceList({
        ...this.oldSearchData,
        pageNum: currentPage,
        pageSize,
        ...this.propData
      });
      const { records, total } = res.data || {};
      // eslint-disable-next-line
      let list = records || [];
      list.map((item, index) => {
        item.index = pageSize * (currentPage - 1) + index + 1;
      });
      this.tableData = list;
      this.totalSize = total;
    },
    // 分页处理
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectInstanceList();
    },
    // 搜索
    searchFunc() {
      this.oldSearchData = {
        ...this.searchData
      };
      this.handleCurrentChange(1);
    },
    // 重置
    resetFunc() {
      this.searchData = {
        ...this.initSearchData
      };
      this.oldSearchData = {
        ...this.initSearchData
      };
      this.searchFunc();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
}
.page_box {
  text-align: center;
  margin: 20px 0;
}
</style>
